<template>
  <view class="bigBox">
    <view class="search-header">
      <view class="" @click="handleCityClick" style="display: flex;align-items: center;justify-content: center;padding: 0 20rpx 0 40rpx;">
        <text class="city-name" v-show="chooseCity">{{ chooseCity}}</text>
        <image class="down-arrow" :src="$store.state.imgBaseUrl + '/icon/downArrow.png'" mode=""></image>
      </view>
      <view class="search_input">
        <image :src="$store.state.imgBaseUrl + '/icon/searchIcon.png'" mode=""></image>
        <input type="text" value="keywords" v-model="keywords"  @focus="handleInputFocus($event)" placeholder="请输入找店名称" />
      </view>
      <view class="anewLocation" @click="anewLocation">
        <view class="anewLocation-img">
          <image style="width: 39rpx;height: 39rpx;" :src="$store.state.imgBaseUrl + '/findShop/myposition.png'" mode=""></image>
        </view>
        <!-- <view class="anewLocation-txt">重新定位</view> -->
      </view>
    </view>
    <view class="view-head">
      <view class="typesBox">
        <view class="types">
          <picker @change="typePickerChange" :value="typeIndex" :range="typePickerList">
            <view class="title-select">
              <text>{{typePickerList[typeIndex]}}</text>
              <image :src="$store.state.imgBaseUrl + '/icon/icon_picker.png'" mode=""></image>
            </view>
          </picker>
        </view>
        <view class="distances">
          <picker @change="distancePickerChange" :value="distanceIndex" :range="distances"  v-if="!chooseCityName">
            <view class="title-select">
              <text>{{distances[distanceIndex]}}</text>
              <image :src="$store.state.imgBaseUrl + '/icon/icon_picker.png'" mode=""></image>
            </view>
          </picker>
          <view class="title-select" v-else>全城</view>
        </view>
        <view class="sorts">
          <picker @change="sortPickerChange" :value="sortIndex" :range="sorts">
            <view class="title-select">
              <text>{{sorts[sortIndex]}}</text>
              <image :src="$store.state.imgBaseUrl + '/icon/icon_picker.png'" mode=""></image>
            </view>
          </picker>
        </view>
      </view>
    </view>
    <scroll-view class="list-right" scroll-y="true"  @scrolltolower="lower" scroll-with-animation  v-if="shopList && shopList.length > 0" :style="{height: (safeHeight + 'px')}">
      <view class="settled_shop" v-for="(item, index) in shopList" :key="item.id" >
        <view class="shop_info" >
          <view class="shop_phone_title">
            <text v-show="!item.isHkd">已入驻</text>
            <image class="shop_photo" :src="item.fileUrl" mode=""></image>
          </view>
          <view class="shop_content" style="flex: 1;">
            <text class="shop_name">{{item.name}}</text> <br/>
            <text class="shop_position text2Ellipsis">{{item.address}}</text>
          </view>
          <view class="shop_operation" v-if="item.latitude && item.longitude">
            <image :src="$store.state.imgBaseUrl + '/findShop/position.png'" mode="" class="img" @click="goToMap(item)"></image>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="noDatas" v-if="isRequest&&(!shopList || shopList.length==0)">
      <image :src="$store.state.imgBaseUrl + '/empty_list.png'" class="noDatasImg"></image>
      <text class="noDatasTxt">暂无数据</text>
      <text class="stroll">先去逛逛吧~</text>
    </view>
    <!-- 重新定位弹窗 -->
    <uni-popup class="join-pop" ref="popup" type="center" :maskClick="false" :show="isShow">
      <view class="pop-box">
        <view class="pop-box-close" @click="closePop">
          <image style="width: 25rpx; height: 25rpx;" :src="$store.state.imgBaseUrl + '/icon/icon_delete.png'"></image>
        </view>
        <view class="nounTitleBox">
          <view class="nounTitle">当前定位</view>
        </view>
        <view class="nounContent">
          <view class="nounContent-img">
            <image style="width: 27rpx;height: 33rpx;" :src="$store.state.imgBaseUrl + '/findShop/atLocaltion.png'" mode=""></image>
          </view>
          <view class="nounContent-txt">
            {{address}}
          </view>
        </view>
        <view class="pop-box-footer">
          <button type="primary" class="sub-btn sub2" @click="confirmPop">确认</button>
        </view>
      </view>
    </uni-popup>
    <mapcompt @getmap="getmap" v-if="loadingComponents"></mapcompt>
  </view>
</template>
<script>
import { findStoreList, findStoreType } from '@/service/findShop/findShop.service.js'
import { getUrlParam } from '@/unit/common.js'
import mapcompt from '@/components/mapCompt.vue'
import uniPopup from "@/components/uni-popup/components/uni-popup/uni-popup.vue"
import { setSafeAreaSize } from '@/mixin/index.mixin.js'
export default {
  mixins: [setSafeAreaSize],
  data() {
    return {
      types: [],
      typePickerList:['店铺类型'],
      typeIndex: 0,
      typeId: '',
      distances: ['附近','附近一公里','附近两公里'],
      sorts: ['智能排序', '已入驻商家','未入驻商家'],
      sortIndex: 0,
      sortId: '',
      distanceIndex: 0,
      longitude: '',
      latitude: '',
      address:'',
      size: 10,
      current: 1,
      total:0,
      distance:5,
      shopList: [],
      // scrollTop: 0,
      // old: {
      //   scrollTop: 0
      // },
      obj: '',
      isShow: false, // 弹框
      isRequest: false,
      chooseCity: '', //默认城市与选择城市
      keywords: '', //搜索关键字
      chooseCityName: '',
      loadingComponents: false
    }
  },
  onLoad (option) {
    // if(option.keyword){
    //   this.keywords = option.keyword;
    //   // this.getShopList();
    // }
  },
  onShow () {
    try {
      let keyword = getUrlParam('keyword');
      let pre = getUrlParam('pre');
      if (keyword) {
        this.keywords = keyword;
      }
      if (pre && pre == 'chooseCity') {
        let chooseCity = uni.getStorageSync('chooseCitys');
        if (chooseCity) {
          this.chooseCity = chooseCity;
          this.chooseCityName = true;
          this.getShopList();
        } else {
          this.chooseCityName = false;
          this.loadingComponents = true;
        }
      } else {
        this.chooseCityName = false;
        this.loadingComponents = true;
      }
    } catch(e) {
      //TODO handle the exception
    }
  },
  mounted () {
    this.getShopType();
  },
  // 下拉刷新
  // onPullDownRefresh() {
  //   let _self = this;
  //   setTimeout(function() {
  //     _self.current = 1
  //     // _self.shopList = []
  //     _self.getShopList();
  //     uni.stopPullDownRefresh();
  //   }, 1000);
  // },
  components: { mapcompt, uniPopup },
  methods: {
    goToMap (item) {
      uni.navigateTo({
        url: '/pages/findShop/store_map?lat=' + item.latitude + '&lng=' + item.longitude
      })
    },
    getmap (obj) {
      /* 获取城市名称*/
      let that = this;
      that.obj = obj
      // const chooseCity = uni.getStorageSync('chooseCitys');
      // if (chooseCity) {
      //   that.chooseCity = chooseCity;
      // } else {
      //   // console.log(obj);
      //   that.latitude = obj.lat;
      //   that.longitude = obj.lng;
      //   that.chooseCity = obj.province;
      //   that.address = obj.address;
      //   if (that.address) {
      //     that.isShow = true;
      //   }
      // }
      uni.setStorageSync('MAPOBJ', obj)
      that.latitude = obj.lat;
      that.longitude = obj.lng;
      that.chooseCity = obj.province;
      that.address = obj.address;
      if (that.address && obj.showModal) {
        that.isShow = true;
      }
      that.loadingComponents = false;
      that.getShopList()
    },
    //获取店铺列表
    getShopList () {
      //店铺类型
      if(this.typeIndex > 0){
        this.typeId = this.types[this.typeIndex-1].id;
      } else {
        this.typeId = '';
      }
      //距离   如果为全城 距离参数为空
      // if (this.chooseCity) {
      //   this.distance = '';
      // } else {
      //   if(this.distanceIndex == 0) {
      //     this.distance = 30;
      //   } else if(this.distanceIndex == 1){
      //     this.distance = 1;
      //   } else if(this.distanceIndex == 2){
      //     this.distance = 2;
      //   }
      // }
      //排序
      if(this.sortIndex == 0) {
        this.sortId = '';
      } else if(this.sortIndex == 1){
        this.sortId = 0;//已入驻商家
      } else if(this.sortIndex == 2){
        this.sortId = 1;//未入驻商家
      }
      let params = {
        size: this.size,
        current: this.current,
        storeTypeId: this.typeId,
        store: this.sortId,
        storeName: this.keywords // 店铺名称
      }
      uni.showLoading()
      let pre = getUrlParam('pre');
      if (pre && pre == 'chooseCity') {
        let chooseCity = uni.getStorageSync('chooseCitys');
        if (chooseCity) {
          params.cityName = chooseCity;
        } else {
          if(this.distanceIndex == 0) {
            params.distance = 30;
          } else if(this.distanceIndex == 1){
            params.distance = 1;
          } else if(this.distanceIndex == 2){
            params.distance = 2;
          }
          params.latitude = this.latitude;
          params.longitude = this.longitude;
        }
      } else {
        if(this.distanceIndex == 0) {
          params.distance = 30;
        } else if(this.distanceIndex == 1){
          params.distance = 1;
        } else if(this.distanceIndex == 2){
          params.distance = 2;
        }
        params.latitude = this.latitude;
        params.longitude = this.longitude;
      }
      findStoreList(params,(res =>{
        this.isRequest = true;
        if(res.status == 0){
          if (this.current === 1) {
            this.shopList = res.data.records;
          } else {
            this.shopList = this.shopList.concat(res.data.records);
            if (Number(this.total) === Number(this.shopList.length)) {
              return false;
            }
          }
          this.total = res.data.total;
        }
        uni.hideLoading()
      }))
    },
    lower () {
      if (this.total > this.shopList.length) {
        this.current++;
        this.getShopList();
      } else {
        uni.showToast({
          title: '已经到底喽！',
          icon: 'none'
        })
      }
    },
    // scroll: function(e) {
    //   this.old.scrollTop = e.detail.scrollTop
    // },
    //获取店铺类型
    getShopType () {
      findStoreType({},(res => {
        if(res.status == 0){
          this.types = res.data;
          for(var item of this.types){
            this.typePickerList.push(item.name);
          }
        }
      }))
    },
    typePickerChange (e) {
      this.typeIndex = e.detail.value;
      this.current = 1;
      this.getShopList();
    },
    distancePickerChange (e) {
      this.distanceIndex = e.detail.value;
      this.current = 1;
      this.getShopList();
    },
    sortPickerChange (e) {
      this.sortIndex = e.detail.value;
      this.current = 1;
      this.getShopList();
    },
    /* 城市选择的点击跳转事件*/
    handleCityClick() {
      uni.navigateTo({
        url: '/pages/findShop/pushCity'
      });
    },
    /* 输入框的点击跳转事件*/
    handleInputFocus() {
      let params = [];
      this.chooseCity ? params.push('City=' + this.chooseCity) : '';
      this.keywords ? params.push('keywords='+ this.keywords) : '';
      uni.navigateTo({
        url:'/pages/findShop/pushSearch' + (params.length > 0 ? '?' + params.join('&') : '')
      });
    },
    // 重新定位
    anewLocation () {
      uni.removeStorageSync('chooseCitys');
      uni.removeStorageSync('MAPOBJ');
      this.chooseCityName = false;
      this.loadingComponents = true;
      // uni.setStorage({
      //   key: 'popUp',
      //   data: 'isShow',
      //   success: function (res) {
      //     location.reload();
      //   }
      // });
    },
    confirmPop () {
      this.isShow = false;
      // uni.removeStorageSync('popUp');
    },
    closePop () {
      this.isShow = false;
      // uni.removeStorageSync('popUp');
    },
  }
}
</script>

<style lang="scss" scoped>
.view-head{
  width: 100%;
  background:rgba(255,255,255,1);
}
.search-header {
  width: 100%;
  height: 100rpx;
  padding-top: 20rpx;
  display: flex;
  align-items: center;
  background: white;
  align-items: center;
  justify-content: space-around;
  .city-name {
    line-height: 100rpx;
    margin-right: 10rpx;
    // margin-left: 30rpx;
    text-align: center;
    font-size: 28rpx;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
  }
  .search_input {
    flex: 1;
    height: 72rpx;
    // margin-top: 17rpx;
    background: rgba(245, 245, 245, 1);
    border-radius: 10rpx;
    display: flex;
    uni-input {
      width: 100%;
      height: 100%;
    }
    image {
      width: 32rpx;
      height: 32rpx;
      margin: 20rpx 18rpx 20rpx 20rpx;
    }

    input {
      font-size: 28rpx;
      color: #BBBBBB;
    }
  }
  .anewLocation {
    padding: 0 40rpx 0 20rpx;
    .anewLocation-img {
      text-align: center;
    }
    .anewLocation-txt {
      font-size: 22rpx;
      font-weight:500;
      color:rgba(99,99,99,1);
    }
  }
  .down-arrow {
    width: 18rpx;
    height: 12rpx;
    // margin: 44rpx 26rpx 0 10rpx;
  }
}
.typesBox {
  height: 100rpx;
  box-shadow:0px 10px 15px 0px rgba(0,0,0,0.05);
  // border-radius:5px 5px 0px 0px;
  display: flex;
}
.pos-top{
  height: 100rpx;
}
.view-head view{
  flex: 1;
  line-height: 100rpx;
  text-align: center;
  font-size: 28rpx;
  font-weight:400;
  color:rgba(51,51,51,1);
  z-index: 1;
  .title-select{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  image{
    width: 16rpx;
    height: 6rpx;
    margin-left: 14rpx;
  }
}
.list-right{
  display: inline-block;
  height: calc(100vh - 100rpx);
  display: flex;
}
.settled_shop{
  // height: 318rpx;
  background: #FFFFFF;
  box-shadow:0 0 30rpx 0 rgba(0,0,0,0.05);
  border-radius: 16rpx;
  margin-top: 32rpx;
  padding: 32rpx 30rpx 40rpx;
  .shop_info{
    display: flex;
    justify-content: flex-start;
    .shop_phone_title{
      position: relative;
      text{
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        padding-left: 10rpx;
        width: 90rpx;
        height: 28rpx;
        line-height: 28rpx;
        display:block;
        background: rgba(126,165,255,1);
        border-radius: 8rpx 0 200rpx 0;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }
    .shop_photo{
      width: 140rpx;
      height: 140rpx;
    }
    .shop_content{
      margin-left: 30rpx;
      margin-right: 40rpx;
      .shop_name{
        font-size: 32rpx;
        color: #333333;
        font-weight: 500;
        line-height:44px;
      }
      .shop_position{
        font-size: 28rpx;
        color: #333333;
        font-weight: 400;
        line-height: 40rpx;
      }
      .text2Ellipsis {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
      }
    }
    .shop_operation {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .img {
        width: 26rpx;
        height: 32rpx;
        
      }
    }
  }
}
.noDatas {
  display: flex; 
  flex-direction: column; 
  align-items: center;
  .noDatasImg {
    width: 340rpx;
    height: 340rpx;
    margin-top: 153rpx;
  }
  .noDatasTxt {
    height:36rpx;
    font-size:38rpx;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height: 36rpx;
  }
  .stroll {
    height:29rpx;
    font-size:30rpx;
    font-weight:500;
    color:rgba(102,102,102,1);
    line-height: 29rpx;
    margin-top: 35rpx;
  }
}
.pop-box {
  .pop-box-close {
    position: absolute;
    right: 30rpx;
  }
  .nounTitleBox {
    border-bottom: 1rpx solid #E1E1E1;
    margin: 0 15rpx;
    .nounTitle {
      font-size:30rpx;
      color:rgba(51,51,51,1);
      padding: 32rpx 0;
      text-align: center;
    }
  }
  .nounContent {
    padding: 70rpx 30rpx;
    display: flex;
    .nounContent-img {
      width: 27rpx;
      height: 33rpx;
    }
    .nounContent-txt {
      font-size:26rpx;
      font-weight:500;
      color:rgba(0,0,0,1);
      margin-top: 5rpx;
      margin-left: 20rpx;
    }
  }
  &-footer {
    display: flex;
    justify-content: space-between;
    .sub-btn {
      width: 260rpx;
      height: 60rpx;
      line-height: 60rpx;
      color: #F6DA99;
      font-size: 24rpx;
      background-color: #434343;
      border: none;
      &.yellow {
        width: 180rpx;
        background-color: #F6DA99;
        color: #434343;
      }
      &.sub2 {
        width: 100%;
      }
    }
  }
}
</style>
